<template>
  <div class="container">
    <div class="header">
      <h2>添加资讯</h2>
    </div>
    
    <form @submit.prevent="handleSubmit" class="news-form" >
      <div class="form-group">
        <label for="title">资讯标题</label>
        <input 
          type="text" 
          id="title" 
          v-model="form.title" 
          required
          placeholder="请输入资讯标题"
        >
      </div>
      
      <div class="form-group">
        <label for="content">资讯内容</label>
        <textarea 
          id="content" 
          v-model="form.content" 
          required
          rows="10"
          placeholder="请输入资讯内容"
        ></textarea>
      </div>
      
      <div class="form-actions">
        <button type="submit" class="btn submit-btn">提交</button>
        <button type="button" class="btn cancel-btn" @click="handleCancel">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';// 导入axios库

// 表单数据
const form = ref({
  title: '',
  content: ''
});

const router = useRouter();

const addNews = async () => {
    try{
        const response = await axios.post('/api/addNews',{//必填pageNum,pageSize,得到pageInfo
            title:form.value.title,
            content:form.value.content
        })
        alert("添加成功！")
    }catch(error){
        alert('添加失败！');
   
    }
}

// 提交表单
const handleSubmit = () => {
  // 这里是提交逻辑，实际项目中会调用API
  console.log('提交资讯:', form.value);
  addNews();
  // 提交成功后返回列表页
  
    router.push('/newslist');

  
};

// 取消操作
const handleCancel = () => {
  router.push('/newsList');
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.header h2 {
  color: #333;
  margin: 0;
  font-size: 1.5rem;
}

.news-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #666;
}

.form-group input,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #ff6600;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.2);
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.submit-btn {
  background-color: #ff6600;
  color: white;
}

.submit-btn:hover {
  background-color: #e55a00;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e9e9e9;
}
</style>
